<template>
	<div class="user">
		<component :is="active" :userId="userId"></component>
		<mailboxAdministration />
	</div>
</template>
<script>
export default {
	components: {
		mailboxAdministration: () => import('./components/mailboxAdministration.vue'),
		Layout: () => import('./layout.vue'),
		Add: () => import('./components/Add.vue')
	},
	data() {
		return {
			active: 'Layout',
			userId: ''
		};
	},
	computed: {
		isEdit() {
			return this.$route.query.action;
		}
	},
	watch: {
		isEdit: {
			handler(val) {
				if (!!val && val === 'edit') {
					let userInfo = JSON.parse(window.sessionStorage.getItem('userinfo'));
					this.active = 'Add';
					this.userId = userInfo.id;
				} else {
					this.active = 'Layout';
					this.userId = '';
				}
			},
			immediate: true
		}
	},
	mounted() {
		this.$bus.$on('changeUserTemplate', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('changeUserTemplate');
	},
	methods: {
		init(val, userId) {
			this.active = val;
			this.userId = userId || '';
		}
	}
};
</script>
<style scoped lang="scss"></style>
